<?php
    $this->headScript()->appendFile($this->baseUrl() . '/application/modules/Ecard/externals/pickcolor/Color.js/Color.js');
    $this->headScript()->appendFile($this->baseUrl() . '/application/modules/Ecard/externals/pickcolor/Source/ColorRoller.js');
    
     $this->headLink()
          ->prependStylesheet($this->baseUrl() . '/application/modules/Ecard/externals/pickcolor/Source/Assets/ColorRoller.css');
?>
<style type="text/css">
.ecard-form{
    float: left;
    border: 5px solid #C6C8C6;
    border-radius: 8px 8px 8px 8px;
    padding: 15px;
    width: 900px;        
}
.global_form div{
/*    float: none;   */
}
div.form-wrapper {
    clear: both;
    overflow: auto;
}
.global_form div.form-label{
    clear: left;
    color: #777777;
    float: left;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 4px 15px 0 2px;
    text-align: right;
    width: 88px;
}
div.form-element {
    clear: none;
    float: left;
    margin-bottom: 10px;
    max-width: 900px;
    min-width: 150px;
    overflow: hidden;
    text-align: left;
}
#content{
    height: 100px;
    margin-bottom: 6px;
    margin-top: 6px;
    vertical-align: middle;
    width: 440px;
}
#upload{
    margin-bottom: 6px;
    margin-top: 6px;
    vertical-align: middle;
}
.image{
    background: no-repeat scroll center center;
    float: left;  
    margin-left: 60px;
    /*margin-top: 40px;*/
    width: 130px;
    height: 160px;
    border: 1px solid #C6C8C6;
    border-radius: 8px 8px 8px 8px;
    z-index: 99;
}
.font{
    background: no-repeat scroll center center;
    float: left;  
    margin-left: 60px;
    /*margin-top: 40px;*/
    width: 170px;
    height: 40px;
    text-align: center;
    border: 1px solid #C6C8C6;
    /*border-radius: 8px 8px 8px 8px;*/
    z-index: 99;
}
.position{
    background: no-repeat scroll center center;
    float: left;  
    margin-left: 65px;
    /*margin-top: 40px;*/
    width: 170px;
    height: 100px;
    text-align: center;
    /*border: 1px solid #C6C8C6;*/
    /*border-radius: 8px 8px 8px 8px;*/
    z-index: 99;
}
div.block_top {
    border: 1px solid #C6C8C6 !important;
    margin: 20px !important;
    padding: 15px  !important;
}
#image-element, #font-element, #color-element, #fsize-element, #position-element{
    margin-bottom: 50px;
}

#category-label{
    width: 50px;
    padding-bottom: 20px;
}
#font_label, #color_label, #fsize_label, #position_label{
    font-weight: bold;
    padding-bottom: 20px;
}
.radio_input{
    clear: both !important;
    display: inline !important;
    float: none !important;
    width: auto !important;

}
.crBox{
    float: left !important;
}
</style>

<div class="ecard-form">
<?php //echo $this->form->render($this) ?>
<?php if($this->error): ?>
	<ul class="form-errors">
		<li><?php echo $this->error ?></li>
	</ul>
<?php endif; ?>
<!-- <div id="image"></div>-->
<form id="<?php echo $this->form->getAttrib('id');?>" name="<?php echo $this->form->getAttrib('name');?>" enctype="multipart/form-data" action="<?php echo $this->escape($this->form->getAction()) ?>" method="<?php echo $this->escape($this->form->getMethod()) ?>" class="global_form">
        
    <h3>
        <?php echo $this->translate($this->form->getTitle()) ?>
    </h3>
    <p class="form-description"><?php //echo $this->translate($this->form->getDescription()) ?></p>
    <div class="form-elements">
        <?php echo $this->form->getDecorator('FormErrors')->setElement($this->form)->render("");?>
        <?php if($this->form->getDecorator('FormMessages')->getMessages()) echo $this->form->getDecorator('FormMessages')->setElement($this->form)->render('');?> 
     
        <?php echo $this->form->title; ?>
        
        <?php echo $this->form->text_content; ?>                

        <?php echo $this->form->upload; ?>
        <div class="block_top">
            <?php echo $this->form->category; ?>            
                <div class="form-wrapper" id="image-wrapper">
                    <?php foreach($this->images as $image):?>
            			<div class="form-element" id="image-element">
                            <div class="image" style="background-image: url(<?php echo $image->getPhotoUrl('thumb.normal')?>);"></div>
                            <input class="radio_input" name="background_id" id=<?php echo "bg_".$image->image_id;?> value=<?php echo $image->image_id?> type="radio" style="vertical-align: middle;">
                        </div>                                                         
            		<?php endforeach;?>
                </div>            
        </div>
        <div class="block_top">
            <div class="form-wrapper" id="font-wrapper">
                <div id="font_label"><?php echo $this->translate('Choose a Font')?></div>
                <?php foreach($this->fonts as $font):?>
                    <div class="form-element" id="font-wrapper">
                        <div class="font" style="background-image: url(<?php echo "application/modules/Ecard/externals/images/font_image/".$font->title.".gif" ?>);"></div>
        			    <input class="radio_input" name="font_id" id=<?php echo "ft_".$font->font_id;?> value=<?php echo $font->font_id?> type="radio" style="vertical-align: middle;" onclick="fontSelect('<?php echo $font->title?>');">
                    </div>                                                                         
        		<?php endforeach;?>    			                                                                                                                                       
    		</div>
        </div>        

        <div class="block_top">
            <div class="form-wrapper" id="color-wrapper">
                <?php echo $this->form->text_color; ?>                                                                           
    		</div>
        </div>   
        
        <div class="block_top">
            <div class="form-wrapper" id="fsize-wrapper">
                <?php echo $this->form->text_size; ?>                                                                           
    		</div>
        </div>  
        
        <div class="block_top">
            <div class="form-wrapper" id="position-wrapper">
                <div id="position_label"><?php echo $this->translate('Select Position')?></div>                                                                           
                    <div class="form-element" id="font-wrapper">
                        <div class="position" style="background-image: url(application/modules/Ecard/externals/images/fa_top00.gif );"></div>
        			    <input class="radio_input" name="text_alignment" id="ps_top" value="top" type="radio" style="vertical-align: middle;">
                    </div>    
                    <div class="form-element" id="font-wrapper">
                        <div class="position" style="background-image: url(application/modules/Ecard/externals/images/fa_botto.gif );"></div>
        			    <input class="radio_input" name="text_alignment" id="ps_bot" value="bot" type="radio" style="vertical-align: middle;">
                    </div>    
                    <div class="form-element" id="font-wrapper">
                        <div class="position" style="background-image: url(application/modules/Ecard/externals/images/fa_middl.gif );"></div>
        			    <input class="radio_input" name="text_alignment" id="ps_mid" value="mid" type="radio" style="vertical-align: middle;">
                    </div>                                                		  
            </div>
        </div>
        <?php echo $this->form->font_title; ?>                  
        <?php echo $this->form->file_id; ?>
        <?php echo $this->form->file_url; ?>
        <?php echo $this->form->buttons; ?>
    </div>
     
</form> 
</div>
<?php 
//    $background = $this->backgound;
//        $color = $this->color;
?>
<script type="text/javascript">
    function fontSelect(font_title){
        $('font_title').set('value',font_title);
    }
    
    
    function hexToRgb(hex) {
            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }
        var b = hexToRgb('<?php echo $this->b?>');

        var CRImages = "<?php echo $this->baseUrl()?>/application/modules/Ecard/externals/pickcolor/Source/Assets/";
		window.addEvent('domready', function init(){
			
			new ColorRoller('text_color', {
				onComplete:function(color){
					$('text_color').set('value', color);
				},
                'color':[b.r,b.g,b.b]
			});
    });	
</script>
